<template>
  <div class="app-container">
    <!-- 查询区域 -->

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="课程号">
        <el-input v-model="formInline.code" placeholder="课程号"></el-input>
      </el-form-item>
      <el-form-item label="课程名">
        <el-input v-model="formInline.course" placeholder="课程名"></el-input>
      </el-form-item>
      <el-form-item label="分数">
        <el-input v-model="formInline.grade" placeholder="分数"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>





    <!-- 添加 -->
    <el-button type="primary" @click="handleAddRole()">添加</el-button>
    <el-button type="primary" @click="flash()">刷新</el-button>
      <el-button type="primary" @click="close()">关闭网页</el-button>

    <!-- 表格区域 -->
    <el-table :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column align="center" label="课程号" width="150">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="课程名" width="150">
        <template slot-scope="scope">
          {{ scope.row.course }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="分数" width="150">
        <template slot-scope="scope">
          {{ scope.row.grade }}
        </template>
      </el-table-column>
<!--
      <el-table-column align="center" label="所属学院" width="150">
        <template slot-scope="scope">
          {{ scope.row.teacherArea.department }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="专业" width="150">
        <template slot-scope="scope">
          {{ scope.row.teacherArea.major }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="班级" width="150">
        <template slot-scope="scope">
          {{ scope.row.teacherArea.clazz }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="家庭住址" width="150">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="电话号码" width="150">
        <template slot-scope="scope">
          {{ scope.row.tel }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="邮箱" width="200">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column> -->

        <!-- 编辑,删除区域 -->
      <el-table-column label="操作" align="center" width="245" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="deleteteacher(scope.row.code)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页区域-->
    <div class="el-pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[6, 10, 12, 14]" :page-size="6" layout="total, sizes, prev, pager, next, jumper" :total="50">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
      <el-form :model="teacher" label-width="80px" label-position="left">
        <el-form-item label="课程号">
          <el-input v-model="teacher.code" placeholder="课程号" />
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="teacher.course" placeholder="课程名" />
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="teacher.grade" placeholder="分数" />
        </el-form-item>
       <!-- <el-form-item label="所属学院">
          <el-input v-model="teacher.department" placeholder="所属学院" />
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="teacher.major" placeholder="专业" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="teacher.clazz" placeholder="班级" />
        </el-form-item>
        <el-form-item label="家庭住址">
          <el-input v-model="teacher.address" placeholder="家庭住址" />
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="teacher.tel" placeholder="电话号码" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="teacher.email" placeholder="邮箱" />
        </el-form-item> -->
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSrudent">确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import {
    getList
  } from '@/api/teacher/tableT'

  const defaultRole = {
    code: '',
    course: '',
    grade: '',
    // department: '',
    // major: '',
    // clazz: '',
    // address: '',
    // tel: '',
    // email: '',
  }

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        // 查询区域
        formInline: {
                  code: '',
                  course: '',
                  grade: ''
        },
        teacher: Object.assign({}, defaultRole),
        dialogVisible: false,

        list: null,
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
        // 查询
       onSubmit() {
              console.log('submit!');
       },

        // 添加
       handleAddRole() {
         this.teacher = Object.assign({}, defaultRole)
         this.dialogType = 'new'
         this.dialogVisible = true
       },


       // 编辑区域
       handleEdit(scope) {
         this.dialogType = 'edit'
         this.dialogVisible = true
         this.teacher = deepClone(scope.row)
       },

      async confirmSrudent() {
        this.dialogVisible = false
      },



      // 分页区域
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

      fetchData() {
        var vm = this;
        getList().then(res => {
          console.log(res.content);
          vm.list = res.content;
        })
      }
    },
    

    // 添加
     // addteacher(){
     //   this.$router.push("/form/teacher/add")
     // },


    // 编辑区域
    // edit(code) {
    //   // 路由传参，code
    //   // "/form/teacher/index/"+code
    //   this.$router.push("/form/teacher/index/" + code)
    // },


    // 删除区域
    // deleteteacher(code){

    // },
  }
</script>
